html {
    scroll-behavior: smooth;
}
body{font-family: 'Roboto', sans-serif;}
h1, h2, h3, h4, h5, h6{font-family: 'Poppins', sans-serif;}
p{font-size:14px}
a{text-decoration:none;}
ul{list-style:none;}
.pt-30{padding-top:30px}
.pb-30{padding-bottom:30px}
.pt-50{padding-top:50px}
.pb-50{padding-bottom:50px}
.pt-80{padding-top:80px}
.pb-80{padding-bottom:80px}
.pt-120{margin-top:200px}
.form_css{background-color: #f4f4f4;padding:0px}
.form_heading{padding:25px 25px 0px 25px;border-bottom:5px solid #ffc20e;background-color:#0047AB;color:white}
.form_heading h2{font-size:28px; font-weight:700;text-transform:capitalize}
.form_heading p{font-size:13px}
.contact-form{padding:25px}
.contact-info{margin-top:25px}
.contact-info li{margin-bottom:20px}
.contact-info li i{color:#ffc20e;font-size:20px;margin-right:6px;}
.contact-info span{font-weight:600}
.contact-info span{font-weight:400}
.submit_btn{background-color:#ffc20e;color:white;border-radius:3px;width:100%}
.top-bar a{color:white}
.main-title {
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    font-weight: 800;
    line-height: 40px;
    font-size: 20px;
    position: relative;
    display: table;
    z-index: 1;
    transition: all 0.3s ease;
}
.main-title:before {
  content: "";
  width: 40%;
  height: 90%;
  background-color: #ffc20e;
  position: absolute;
  top: 0;
  left: -5px;
  z-index: -1;
  transition: all 1s 0.5s ease;
  animation: title 0.8s ease;
  animation-fill-mode: forwards;
}
@keyframes title {
  0% {width: 0;}
  100% { width: 40%;}
}
.main-title1 {
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    font-weight: 800;
    line-height: 40px;
    font-size: 20px;
    position: relative;
    display: table;
    z-index: 1;
    transition: all 0.3s ease;
}
.main-title1:before {
  content: "";
  width: 40%;
  height: 90%;
  background-color: #ffc20e;
  position: absolute;
  top: 0;
  right: -5px;
  z-index: -1;
  transition: all 1s 0.5s ease;
  animation: title 0.8s ease;
  animation-fill-mode: forwards;
}
@keyframes title {
  0% {width: 0;}
  100% { width: 40%;}
}
.inner-banner {
    padding: 130px 0;
    background: url(../images/contact-us-banner.png);
    background-position: top;
    background-size: cover;
    position: relative;
    color: white;
}
.inner-banner1 {
    padding: 130px 0;
    background: url(../images/about/samajonnatii.jpg);
    background-position: bottom;
    background-size: cover;
    position: relative;
    color: white;
}
.inner-banner2 {
    padding: 130px 0;
    background: url(../images/banner.jpg);
    background-position: right;
    background-size: cover;
    position: relative;
    color: white;
}
.inner-banner3 {
    padding: 130px 0;
    background: url(../images/faculty_bg.jpg);
    background-position: right;
    background-size: cover;
    position: relative;
    color: white;
}
.inner-banner4 {
    padding: 130px 0;
    background: url(../images/achievement.jpg);
    background-position: right;
    background-size: cover;
    position: relative;
    color: white;
}
.inner-banner5 {
    padding: 130px 0;
    background: url(../images/events-bg.jpg);
    background-position: right;
    background-size: cover;
    position: relative;
    color: white;
}
.inner-banner6 {
    padding: 130px 0;
    background: url(../images/corporatetocampus.png);
    background-position: right;
    background-size: cover;
    position: relative;
    color: white;
}
.inner-banner7 {
    padding: 130px 0;
    background: url(../images/banner-activity.png);
    background-position: right;
    background-size: cover;
    position: relative;
    color: white;
}
.banner_text{color: white;letter-spacing:1px; font-size: 40px;font-weight:800;text-transform:uppercase;text-shadow: 1px 1px 6px rgb(0 0 0 / 42%);}
#sidebar-nav {width: 200px;float: left;background-color:white}
#sidebar-nav li {list-style: none;margin: 10px;padding: 2px;display:block}
#content {height: auto;width: 80%;padding:0px 30px 30px 30px;margin: 0 0 10px 5px;float: right;border-left: 1px solid #ffc20e;}
.clear {clear: both;}
/* Sticky our navbar on window scroll */
#sidebar-nav.sticky {position: fixed;top: 5px;}
#sidebar-nav i{margin-right:6px;color:#ffc20e}
#sidebar-nav a{font-size:16px;text-transform:uppercase;color:black}
.about h2{font-size:40px;font-weight:100;line-height:50px}
.vision h2{font-size:25px;font-weight:100;line-height:40px;margin-bottom:15px}
.mission h2{font-size:25px;font-weight:100;line-height:40px;margin-bottom:15px}
.vision span{font-weight:700}
.mission span{font-weight:700}
.mission{text-align:-webkit-right}
.about img{height:350px;width:400px}
.founder-title{text-align:center;margin-top:80px;margin-bottom:40px;border-top:1px solid rgba(0, 0, 0, 0.1);border-bottom:1px solid rgba(0, 0, 0, 0.1)}
.bg-white{background-color:white}
.clear:after, .clear:before {content: '';display: table;clear: both;}
.gallery {display: flex;flex-wrap: wrap;width: calc(100% - 50px);margin: 60px auto 0;}
.gallery a {display: block;text-decoration: none;width: 25%;overflow: hidden;outline: none;}
.gallery a img {height: 100%; transform: scale(1,1);transition: all 300ms ease;}
.gallery a img:hover {transform: scale(1.1,1.1);}
.bg {width: 100%;height: 300px;background-size: cover;background-position:center; transform: scale(1,1);transition: all 300ms ease;margin:6px;}
.bg:hover {transform: scale(1.1,1.1);}
.phoneno a{color:black}
.mailid a{color:black}

@media(max-width: 991px) {
    .gallery a {width: 50%;}
}
@media(max-width: 767px) {
    .gallery a {width: 100%;}
    .bg {height: 300px;}
}
@media(max-width: 767px) {
    body{padding: 0px 5px}
    .navbar-collapse ul li{margin-bottom:6px;border-bottom:1px solid rgba(0, 0, 0, 0.1)}
    .modalContent{padding:3px !important}
    .modalPopup{width:80% !important}
    .navbar-toggler{margin-right:12px}
    .sidebar-nav, .nav-list {display: none !important}
    .top-bar{display:none}
    #content {width: 100%;padding:10px !important}
    .about img {height: 100%}
    .vision_col {flex-flow: column-reverse;}
    .home_bg{flex-flow: column-reverse;}
    .banner-text h1{font-size:20px !important}
    .about-heading h2{font-size:20px !important}
    .about h2{font-size:18px !important}
    .feature-box{margin-bottom:15px}
    .faculty_card h2{font-size:14px !important}
    .faculty_card{margin:10px}
    .p-5{padding:20px !important}
    .popupp{width:80% !important}
    .inner-banner, .inner-banner2, .inner-banner3, .inner-banner4, .inner-banner5{padding:60px 0px !important}
    .banner_text{font-size:25px !important;}
    .toggle{background:#0047AB !important;}
    .activities-img img{position:absolute;top:15% !important;left:0% !important;padding:10px}
    .banner-text{ align-self: center;background-color:#ffc20e;padding:35px 45px;position:relative !important;right:0px !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
    #container {
        width: auto;
        height: 60vh !important;
        max-width: 100%;
        background: center / cover no-repeat url("../images/home-banner-img.jpg");
        position: relative;
    }

    #hero-text {
        z-index: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 60vh !important;
    }
    .our-feature{height:auto !important}
    .pt-120{margin-top: 20px !important}
    .slick-slide img {
        width: 100%;
        height: 50px !important;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px
    }
}
.faculty_card img{width:auto;height:200px}
.faculty_card p{text-align:justify}
.faculty_card h2{font-size:16px;font-weight:500;margin:10px auto 0px auto}
.faculty_card span{color:gray}
.faculty_card{background-color:#f3f7fa;text-align:center;padding:15px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.faculty_card i{font-size:20px;color:#ffc20e;border:1px solid #ffc20e;padding:4px 8px;border-radius:100%;margin-top:10px}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:999
}
.popup{height: auto;overflow-y:scroll}
.popupp{height: 350px;overflow-y:scroll}
.overlay:target {visibility: visible;opacity: 1;}
.popupp {margin: 70px auto;padding: 20px;background: #fff; border-radius: 5px;width: 40%;position: relative;transition: all 5s ease-in-out;}
.popup {margin: 70px auto;padding: 20px;background: #fff; border-radius: 5px;width: 40%;position: relative;transition: all 5s ease-in-out;}
.popup h2 {margin-top: 0;color: #333;}
.popup .close {position: absolute;top: 0px;right: 20px;transition: all 200ms;font-size: 30px;font-weight: bold;text-decoration: none;color: #333;}
.popupp .close {position: absolute;top: 0px;right: 20px;transition: all 200ms;font-size: 30px;font-weight: bold;text-decoration: none;color: #333;}
.popup .close:hover {color: #ffc20e;}
.popup .content {max-height: 30%;overflow: auto;}
@media screen and (max-width: 700px){
  .box{width: 70%;}
  .popup{width: 70%;height:auto}
  .popupp{width: 70%;height:auto}
}
.banner-text{align-self: center;background-color:#ffc20e;padding:35px 45px;position:absolute;right:85px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.banner-text h1{font-size:30px}
.home-banner{margin:5px;border:10px solid white;padding:8px}
.home_bg{background-color:#f3f7fa}
.about-heading h2{font-weight:700;font-size:25px;}
.about-heading span{color:gray;text-transform:uppercase;border-bottom:1px solid rgba(0, 0, 0, 0.1)}
.about-us p{margin:15px 0px 0px 25px;text-align:justify}
.feature-heading{font-size:30px;font-weight:600;margin-bottom:45px;text-transform:uppercase;line-height:45px;width: fit-content;margin-left:30px}
.feature-box{box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;padding:15px;background-color:white;}
.feature-box img{height:40px;margin-bottom:18px}
.feature-box h2{font-weight:700;font-size:20px;border-bottom:1px solid #ffc20e;width: fit-content;margin-bottom:18px}
.our-feature{margin-top:80px; background-image:url(../images/bg-imgg.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;height:340px;width:100%}
.courses{background-color:#f3f7fa;padding:25px}
.courses a{color:white}
.course-box i{color:#ffc20e}
.course-box h2{font-weight:500;text-transform:uppercase;margin-bottom:20px; font-size:18px;border-bottom:1px solid #ffc20e;width: fit-content;}
.course-box ul li{background-color: #060a6b;margin-bottom:10px;padding:8px;color:white}
.course-title{width: fit-content;font-size:23px;font-weight:600;}
.course-bg{background-image:url(../images/bg-img1.png);background-position:left;background-repeat:no-repeat;background-size:contain;}


.clear-fix {
    clear: both;
}

.hidden {
    visibility: hidden !important;
}

/* end global */

/* start of our services section */

#our-services {
    
    min-height: 100vh;
    padding-top: 15vh;
    padding-bottom: 15vh;
    background-image: url(../images/banner1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* OUR SEERVICES LEFT SIDE */

#our-services .desc {
    width: 50%;
    float: left;
}

#our-services .desc .heading h2 {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.4px;
    margin-bottom: 30px;
    font-size:25px
}

#our-services .desc .text {
    color: black;
}

/* OUR SERVICES RIGHT SIDE */

#our-services .services {
    width: 50%;
    float: left;
}

#our-services .services .column {
    float: left;
    margin-right: 75px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

#our-services .services .column .service {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    background: #FFFFFF;
    transition: all 0.1s ease;
    margin-bottom: 7px;
}

#our-services .services .column .service:hover {
    background: #ffc20e;
    color: #fff;
}

#our-services .services .column .service:hover .service-icon {
    color: #fff;
}

#our-services .services .column .service .service-desc {
    transform: rotate(-45deg);
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

#our-services .services .column .service .service-desc .service-icon  {
    font-size: 20px;
    margin-bottom: 5px;
    color: #f57469;
}

/* end of our services section */

/* media query */

@media all and (max-width: 967px) {
    #our-services {
        padding-top: 60px;
        padding-bottom: 30px;
        min-height: auto;
    }
    
    #our-services .desc {
        width: 100%;
        float: none;
        margin-bottom: 30px;
    }
    
    #our-services .services {
        width: 100%;
    }
    
    #our-services .services .column {
        transform: rotate(0deg);
        margin-right: 10px;
    }
    
    #our-services .services .column .service .service-desc {
        transform: rotate(0deg);
    }
}
.navbar-collapse {justify-content: end;padding:12px}

.top-bar{background-image: linear-gradient(to right,#158dbd,#060a6b);color:white}
.top-bar li{font-size:13px;padding-top:6px;}
.navbar-nav a{color:black;text-transform:uppercase;letter-spacing:1px;font-size:14px;border-right:1px solid rgba(0, 0, 0, 0.1);}
.navbar-nav {--bs-nav-link-padding-y: 0;}
.footer-area{color:white;background-image: linear-gradient(to right,#158dbd,#060a6b);}
.footer-area h3{border-bottom:1px solid white;width:fit-content; font-size:15px;text-transform:uppercase;font-weight:600;line-height:35px}
.footer-area li a{font-size:13px;color:white;}
.footer-area li{margin-bottom:8px;margin-left:-15px;font-size:13px;}
.footer-area i{margin-right:6px}
.copy-right-area a{color:black;}
.copy-right-area{padding:10px 0px}
/*modal*/
.modalPopup a:hover{color:white !important}
#modalOverlay {
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 99999;
      height: 100%;
      width: 100%;
      }
      .modalPopup {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 50%;
      padding: 0 0 30px;
      -webkit-box-shadow: 0 2px 10px 3px rgba(0,0,0,.2);
      -moz-box-shadow: 0 2px 10px 3px rgba(0,0,0,.2);
      box-shadow: 0 2px 10px 3px rgba(0,0,0,.2);
      }
      .modalContent {
      padding: 2em 2em;
      overflow-y: scroll;
      height: auto;
      overflow-x:scroll;
      height:450px;
      }
.buttonStyle{background-color:#ffc20e;}
.buttonStyle:hover {background-color:#ffc20e;}
.modalContent a{color:white;font-size:13px}
.modalContent img{height:15px}
.centerr1 {display: flex;justify-content: center;align-items: center;}
.target-block{border:1px solid #0047AB;position: relative;margin-bottom:30px;margin-top:30px;background-color:white}
.media{display:flex}
.target-block i{color:#ffc20e}
.target-block h4{font-weight:600;color:#0047AB}
.media-body p{font-weight:600}
.media-body .student-rank{color:#0047AB}
.border-line {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid #ffc20e;
    top: 5px;
    left: 5px;
    z-index: unset;
}
.sidebar-contact{
  position:fixed;
  top:50%;
  right:-305px;
  transform:translateY(-50%);
  width:300px;
  height:auto;
  padding:20px;
  background:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  box-sizing:border-box;
  transition:0.5s;
  z-index:1
}
.sidebar-contact.active{
  right:0;
}
.sidebar-contact input,
.sidebar-contact textarea{
  width:100%;
  height:36px;
  padding:5px;
  margin-bottom:10px;
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,.5);
  outline:none;
}
.sidebar-contact h2{
  margin:0 0 20px;
  padding:0;
  font-size:18px;
  font-weight:600
}
.sidebar-contact textarea{
  height:60px;
  resize:none;
}
.sidebar-contact input[type="submit"]{
  background:#00bcd4;
  color:#fff;
  cursor:pointer;
  border:none;
  font-size:18px;
}
.toggle{
  position:absolute;
  height:48px;
  width:48px;
  text-align:center;
  cursor:pointer;
  background:#ffc20e;
  bottom:0;
  left:-48px;
  line-height:48px;
}
.toggle:before{
  content:'\f003';
  font-family:fontAwesome;
  font-size:18px;
  color:#fff;
}
.toggle.active:before{
  content:'\f00d';
}

.section-padding {
    padding: 80px 0;
}

.section-title h2{
    font-size: 23px;
    font-weight: 600;
    text-transform:uppercase !important;
    margin-bottom: 40px;
}



.client-testimonial-carousel .owl-dots button {
    height: 5px;
    background: #ffc20e !important;
    width: 10px;
    display: inline-block;
    margin: 5px;
    transition: .2s;
    border-radius: 2px;
}

.client-testimonial-carousel button.owl-dot.active {
    background: #000 !important;
    width: 30px;
}

.client-testimonial-carousel .owl-dots {
    text-align: center;
    margin-top: 25px
}

.single-testimonial-item {
    position: relative;
    box-shadow: 0 0 2px #dadfd3;
    margin: 2px;
    padding: 20px;
    font-style: italic;
    padding-left: 85px;
    height: 260px;
    background-color: #f3f7fa
}

.single-testimonial-item:before {
    font-family: "Font Awesome 5 Free";
    content: "\f10e";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    font-size: 20px;
    color: #ffc20e;
    line-height: 30px;
    margin-top: -15px;
}

.single-testimonial-item:after {
    background: #ddd;
    content: "";
    height: 70%;
    left: 60px;
    position: absolute;
    top: 10%;
    width: 1px;
}

.single-testimonial-item h3 {
    font-size: 20px;
    font-style: normal;
    margin-bottom: 0;
}

.single-testimonial-item h3 span {
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin-top: 5px;
}
    .course .nav li a {
    margin: 5px;
    padding: 8px 8px;
    font-size: 13px;
    color: black;
    border: 1px solid #ffc20e;
}
    .course .nav .active {
    color: white;
    background: #ffc20e;
}
     .course .nav li a:hover  {
    color: white;
    background: #ffc20e;
}


     .myselect {
  -webkit-appearance: none;
  -moz-appearance: none;
  
  width: 100%;
  max-width: 400px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ffc20e;
  font-size: 1rem;
  line-height: 1.5;
  transition: all .2s ease-in-out;
}
 
/*IE*/
.myselect::-ms-expand {
  display: none;
}
 
.myselect:focus {
  outline: 0;
  border-color: #ffc20e;
  box-shadow: 0 0 0 3px rgba(0, 121, 250, .3);
}
.student-name{font-size:13px;}
.morecontent span {display: none;color:black}
.morelink {display: block;text-align: center;}
.activities-img img{position:absolute;top:25%;left:10%}
.activities-img{height:300px;}
#container {
    width: auto;
    height: 80vh;
    max-width: 100%;
    background: center / cover no-repeat url("../images/home-banner-img.jpg");
    position: relative;
}

#hero-text {
    z-index: 1;
    position: relative;
    display: flex;
    justify-content:center;
    align-items:center;
    width: auto;
    height: 80vh;
}

    #hero-text h2 {
        text-transform: capitalize;
        font-size: calc(2rem + 0.9vw);
        color: hsl(216, 33%, 97%);
    }

#overlay {
    background: rgba(0, 0, 0, 0.60);
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    top: 0;
}
.home_form input{width:-webkit-fill-available ;border:1px solid black;border-radius:0px}
.form-select{border:1px solid black;border-radius:0px}
.home_form{background-color:rgba(0,0,0,.2);padding:30px;}
.home_form h2{font-size:20px;font-weight:600}
/* Slider */

.slick-slide {
    margin: 0px 30px;
}

    .slick-slide img {
        width: 100%;
        height:75px;
        border:1px solid rgba(0, 0, 0, 0.1);
        padding:10px
    }

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: '';
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}
.certificate img{height:150px}
.home-contact{background-color:rgba(0,0,0,.2);padding:20px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}